<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WISSC轮滑教培服务网-查询系统</title>
    <#assign base=request.contextPath  />
    <link rel="icon" href="${base}/favicon.ico">
    <link rel="stylesheet" href="${base}/frame/layui/css/layui.css">
    <script src="${base}/frame/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="${base}/js/ztree/jquery-1.4.4.min.js"></script>
    <script src="${base}/js/jquery.min.js"></script>
    <script type="text/javascript" src="${base}/js/feng.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/css/hzw-city-picker.css">
    <script type="text/javascript" src="${base}/js/city-data.js"></script>
    <script type="text/javascript" src="${base}/js/hzw-city-picker.min.js"></script>
    <script type="text/javascript" src="${base}/js/city-zk.js"></script>
    <script type="text/javascript" src="${base}/js/province.js"></script>
</head>
<body>
<form class="layui-form" action="" style="margin: 10px">
    <input type="hidden" id="id" value="${id}"/>
    <input type="hidden" id="occId" value="${occId}"/>
    <div class="layui-form-item">
        <label class="layui-form-label"><a style="color:red">*</a>&nbsp;姓名</label>
        <div class="layui-input-inline">
            <input name="name" id="name" lay-verify="required" autocomplete="off" class="layui-input isNull"
                   type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><a style="color:red">*</a>&nbsp;性别</label>
        <div class="layui-input-inline">
            <input type="radio" id="man" name="sex" value="1" title="男" checked>
            <input type="radio" id="wuman" name="sex" value="2" title="女">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><a style="color:red">*</a>&nbsp;身份证号</label>
        <div class="layui-input-inline">
            <input name="idNumber" id="idNumber" lay-verify="required" autocomplete="off" class="layui-input isNull"
                   type="text">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><a style="color:red">*</a>&nbsp;注册时间</label>
        <div class="layui-input-inline">
            <input name="regTime" id="regTime" lay-verify="required" autocomplete="off" class="layui-input isNull"
                   type="text">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label"><a style="color:red">*</a>&nbsp;选择地区</label>
            <div class="layui-input-inline">
                <select name="provid" id="provid" lay-filter="provid" lay-verify="required"  class="isNull">
                    <option value="">请选择国家</option>
                </select>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select name="cityid" id="cityid" lay-filter="cityid" lay-verify="required">
                        <option value="">请选择省</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <select name="areaid" id="areaid" lay-filter="areaid" lay-verify="required">
                        <option value="">请选择市</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><a style="color:red">*</a>&nbsp;资格选择</label>
        <div class="layui-input-inline">
            <select name="qualifications" lay-verify="required" id="qualifications" class=" isNull">
                <option value="">请选择资格</option>
                <option value="1">教练官资格</option>
                <option value="2">教练员资格</option>
                <option value="3">裁判员资格</option>
                <option value="4">解说员资格</option>
                <option value="5">考评官资格</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item" id="demo"></div>

    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test1" style="background-color: #0092EF;">证书图片</button>
        <div class="layui-upload-list" id="teamLogo">
            <img src="${base}/team/getPhoto?path=${url}" id="demo1" style="width:595px;height:842px"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><a style="color:red">*</a>&nbsp;证件编号</label>
        <div class="layui-input-inline">
            <input type="tel" id="idNo" name="idNo" lay-verify="required" autocomplete="off"
                   class="layui-input isNull">
        </div>
    </div>
    <div class="layui-form-item" style="margin: 10px">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="formDemo" type="button" onclick="onSubmit()"
                    id="aa" style="background-color: #0092EF;">立即提交
            </button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

</body>
<script>

    var idFlag = 0;
    var ids = $("#id").val();
    var fileIds = [];
    layui.use('upload', function () {
        var $ = layui.jquery
            , upload = layui.upload;

        $(function () {
            $.ajax({
                type: "POST",
                traditional: true,//这里设置为trues,不然后台接收到的参数会带上[]，导致数据无法正常接收
                url: "${base}/occupation/getOccupationCity",
                data: {id: $("#id").val()},
                success: function (data) {
                    var arr = data.str.split("/");
                    var arr1 = data.sum.split("-");
                    for (var i = 0; i < arr1.length - 1; i++) {
                        var arr2 = arr1[i].split(",");
                        for (var j = 0; j < 1; j++) {
                            $("#demo").append(
                                ' <div class="layui-form-item">' +
                                '    <div class="layui-inline">' +
                                '    <label class="layui-form-label"><a style="color:red">*</a>&nbsp;科目选择</label>' +
                                '<div class="layui-input-inline">' +
                                '<input id= "occId' + idFlag + '" type="hidden" value= "' + arr2[0] + '"/>' +
                                ' <select name="subject" lay-verify="required" id="subject' + idFlag + '" class=" isNull">' +
                                '    <option value="">请选科目</option>' +
                                '    <option value="1">基础滑轮</option>' +
                                '    <option value="2">速度滑轮</option>' +
                                '    <option value="3">自由式滑轮</option>' +
                                '    <option value="4">轮滑球</option>' +
                                '    <option value="5">极限滑轮</option>' +
                                '    <option value="6">陆地滑雪(滑轮)</option>' +
                                '    </select>' +
                                '    </div>' +
                                '    </div>' +
                                '    <div class="layui-inline">' +
                                '    <label class="layui-form-label"><a style="color:red">*</a>&nbsp;等级选择</label>' +
                                '<div class="layui-input-inline">' +
                                '<select name="subjectLevel" lay-verify="required" id="subjectLevel' + idFlag + '" class=" isNull">' +
                                '<option value="">请选等级</option>' +
                                '<option value="1">基础等级</option>' +
                                '<option value="2">1星</option>' +
                                '<option value="3">2星</option>' +
                                '<option value="4">3星</option>' +
                                '<option value="5">4星</option>' +
                                '<option value="6">5星</option>' +
                                '</select>' +
                                '</div>' +
                                '</div>' +
                                '</div>')
                            $("#subject" + idFlag).val(arr2[1]);
                            $("#subjectLevel" + idFlag).val(arr2[2]);
                            idFlag += 1;
                        }
                    }
                    if (arr != null && arr != "") {
                        for (var i = 0; i < arr.length; i++) {
                            if (i == 0) {
                                $("#provid").find("option:contains('" + arr[i] + "')").attr("selected", true);
                            }
                            if (i == 1) {
                                $("#cityid").append("<option selected='selected' value='" + arr[i] + "' >" + arr[i] + "</option>");
                            }
                            if (i == 2) {
                                $("#areaid").append("<option selected='selected' value='" + arr[i] + "' >" + arr[i] + "</option>");
                            }
                        }
                    }
                    form.render('select');
                }

            });

        })
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            , url: '${base}/file/uploadFile'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //上传成功
                //alert(res.data);
                aa = res.data;
                return res.data;
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    })
</script>
<script type="text/javascript">

    var cityPicker = new HzwCityPicker({
        data: data,
        target: 'cityChoice',
        valType: 'k',
        hideCityInput: {
            name: 'city',
            id: 'city'
        },
        hideProvinceInput: {
            name: 'areaId',
            id: 'areaId',
            val: 'q'
        },
        callback: function () {
        }
    });

    cityPicker.init();
    layui.use(['form', 'layedit', 'laydate', 'layer'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;
        //日期插件
        laydate.render({
            elem: '#regTime'
        });

    });
    var bb = "";
    var aa;

    //编辑
    function onSubmit() {

        if (!isNull()) {
            return;
        }
        var jsonData = {};
        var provid = $("#provid").val()
        var cityid = $("#cityid").val();
        var areaid = $("#areaid").val();
        var str = areaid.replace(/^\"|\"$/g, '');
        var sum = provid + "/" + cityid + "/" + str + "/";
        jsonData.name = $("#name").val();
        jsonData.sex = $("input:radio[name='sex']:checked").val();
        jsonData.idNumber = $("#idNumber").val();
        jsonData.regTime = (new Date($("#regTime").val())).getTime();
        jsonData.city = sum;
        jsonData.qualifications = $("#qualifications").val();
        jsonData.idNo = $("#idNo").val();
        //id
        jsonData.id = $("#id").val();
        if (aa == undefined) {
            jsonData.imageUrl = "${url}";
        } else {
            jsonData.imageUrl = aa;
        }
        for (var i = 0; i < idFlag; i++) {
            var subject = subject + i;
            var occId = occId + i;
            var subjectLevel = subjectLevel + i;
            occId = $("#occId" + i).val();
            subject = $("#subject" + i).val();
            subjectLevel = $("#subjectLevel" + i).val();
            idNo = $("#idNo" + i).val();
            bb += occId + "," + subject + "," + subjectLevel + "-";
        }
        $.ajax({
            type: "POST", //提交方式
            traditional: true,//这里设置为true,不然后台接收到的参数会带上[]，导致数据无法正常接收
            url: "${base}/occupation/updateById",
            data: {param1: JSON.stringify(jsonData), param2: bb},
            success: function (data) {
                if (data.code === 0) {
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                    var table = parent.layui.table;
                    //表刷新方法
                    table.reload('testReload', {
                        url: '${base}/occupation/selectMyPage'//数据接口
                        , where: {} //设定异步数据接口的额外参数
                        //,height: 300
                    });
                } else {
                    layer.msg(data.msg)
                }
            }
        });
    }

    <#--//回显多图片-->
    <#--$(function () {-->
    <#--    $.ajax({-->
    <#--        type: "POST",-->
    <#--        traditional: true,//这里设置为true,不然后台接收到的参数会带上[]，导致数据无法正常接收-->
    <#--        url: "${base}/occupation/getOccupationImageUrl",-->
    <#--        data: {id: $("#ids").val()},-->
    <#--        beforeSend: function () {-->
    <#--            //请求前的处理-->
    <#--        },-->
    <#--        success: function (req) {-->
    <#--            var arr = req.data;//如果前方代码取值不称就用这个：jQuery.parseJSON(data).replies；-->
    <#--            if (arr != null && arr != "") {-->
    <#--                for (var i = 1; i < req.data.length; i++) {-->
    <#--                    $('#demo2').append('<img src="${base}/team/getPhoto?path=' + arr[i] + '  " class="layui-upload-img" style="width:100px;height:100px">')-->
    <#--                }-->
    <#--            }-->
    <#--        },-->
    <#--        error: function () {-->
    <#--        }-->
    <#--    });-->
    <#--})-->

    <#--//隐藏图片-->
    <#--function d() {-->
    <#--    var imgs = document.getElementsByTagName("img"); //找出所有的图片-->
    <#--    for (var i = 0; i < imgs.length; i++) {-->
    <#--        imgs[i].style.display = "none"; //将图片隐藏-->
    <#--    }-->
    <#--}-->
</script>
</html>
